import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    TabView
} from './../../components';

import MePage from './me';
import Filter from './filter';
import Discover from './discover';
import MessagePage from './message';
import ConnectionPage from './connection';

import TabBar from './components/tabBar';
import * as Event from './../../utils/event';
import CheckStep from './../../components/CheckStep';

const Pages = [
    Discover,
    ConnectionPage,
    MessagePage,
    MePage
]

interface State {
    page: number
}

interface Props {
    tabPage: number
}

class Home extends PureComponent<Props, State> {
    filter:any=null;
    constructor(props: Props) {
        super(props);
        const {
            tabPage
        } = props;

        this.state = {
            page: tabPage
        }
    }

    static defaultProps = {
        tabPage: 0
    }

    componentDidMount() {
        Event.emit(Event.ON_ENTER_HOME)
    }

    private onPageChange = (page: number) => {
        this.setState({page});
    }

    public openFilter = (done:Function) => {
        this.filter.open(done);
    }

    private renderItem = (Page:any, i:number) => {
        return (
            <Page
                key={i}
                openFilter={this.openFilter}
            />
        )
    }

    render() {
        const {
            page
        } = this.state;

        return (
            <Fragment>
                <TabView
                    page={page}
                    locked={true}
                    animation={false}
                    onChange={this.onPageChange}
                    children={Pages.map(this.renderItem)}
                />
                <TabBar
                    page={page}
                    onChange={this.onPageChange}
                />
                <Filter ref={(e) => this.filter = e}/>
                <CheckStep active={true} />
            </Fragment>
        )
    }
}

export default Home;